<template>
    <div style="height: 100%;">
        <!-- 弹窗start -->
        <el-dialog title="选择移动到的部门" width="20%" :visible.sync="showDislog" append-to-body="True" @closed="initDialog">
            <el-form label-width="110px" :model="tableForm" v-if="addNewUserDialog == false"
                style="width: 100%;background-color: white;display:flex;flex-direction:column;justify-content:center;align-items: center;flex:1;">
                <el-form-item label="部门" style="width:410px" v-if="editPermission == false">
                    <el-select v-model="tableForm.aimDepartment" style="width:300px">
                        <el-option v-for="item in departmentArr" :key="item.id" :label="item.departmentName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else style="width:350px">
                    <el-checkbox-group v-model="permissionList">
                        <el-checkbox v-for="itemCheckBox in PermissionArr" :key="itemCheckBox.id"
                            :label="itemCheckBox.permissionContent" name="permission"></el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <el-form label-position="right" label-width="80px" v-else :model="employeeForm">
                <el-form-item label="账户">
                    <el-input v-model="employeeForm.username"></el-input>
                </el-form-item>
                <el-form-item label="名称">
                    <el-input v-model="employeeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="所属部门">
                    <el-select v-model="employeeForm.departmentId" placeholder="请选择">
                        <el-option v-for="item in departmentArr" :key="item.id" :label="item.departmentName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div style="width:100%;display:flex;justify-content: flex-end;">
                <el-button type="primary" @click="submitUpdate">确认</el-button>
                <el-button @click="showDislog = false">返回</el-button>
            </div>
        </el-dialog>
        <!-- 弹窗end -->
        <el-container style="height:100%;">
            <el-aside width="400px">
                <div style="width: 90%;height:50px;line-height: 50px;">部门管理</div>
                <el-menu style=" width: 90%;flex:1;padding-top: 20px;border-radius: 20px;" default-active="1"
                    class="el-menu-vertical-demo">
                    <div v-if="status != 'edit'"
                        style="width: 100%; display: flex; flex-direction: column; align-items: center">
                        <el-menu-item style="width: 100%; display: flex; justify-content: center; margin-bottom: 20px"
                            v-for="item in departmentArr" :index="item.id" :key="item.id"
                            @click="getUserInfoByDepartmentId(item.id)">
                            <span slot="title">{{ item.departmentName }}</span>
                        </el-menu-item>
                        <el-button type="primary" @click="editDepartmentArray" style="width: 80%">编辑</el-button>
                    </div>
                    <div v-else style="width: 100%; display: flex; flex-direction: column; align-items: center">
                        <div style="width: 80%;display: flex;justify-content: space-between;margin-bottom: 20px;"
                            v-for="(item, index) in departmentEditArr" :key="item.id">
                            <el-input @change="submitUpdateDepartment(index)" placeholder="请输入部门名称"
                                v-model="item.departmentName" style="width: 70%" clearable>
                            </el-input>
                            <el-link type="warning" @click="editPermissionFunc(item.id)">权限</el-link>
                            <el-link type="danger" @click="delDepartment(index)">删除</el-link>
                        </div>
                        <el-button type="primary" style="width: 80%; margin-bottom: 20px"
                            @click="addDepartment">新增</el-button>
                        <el-button @click="comeBacktoShowDepartment" style="width: 80%; margin: 0">返回</el-button>
                    </div>
                </el-menu>
            </el-aside>
            <el-main>
                <el-button @click="addNewUser" style="width:170px;margin-bottom: 10px;">
                    新增用户信息
                </el-button>
                <div style="width: 100%;flex:1;background-color: white;border-radius: 20px;">
                    <el-table :data="userInfoArr" style="width: 95%;margin:20px auto 10px auto;"
                        :row-class-name="tableRowClassName" :header-cell-style="{
                            background: '#316CFB', color: 'white'
                        }">
                        <el-table-column :prop="item.prop" :label="item.columnName" v-for="item in tableColumn"
                            :key="item.content"></el-table-column>
                        <el-table-column label="操作" v-if="OperationArr.length > 0" width="300">
                            <template slot-scope="scope">
                                <el-link :underline="false" style="margin:0 10px;" v-for="opBar in OperationArr"
                                    :key="opBar.id" :type="opBar.operationType" @click="doOperation(scope.row, opBar.id)">{{
                                        opBar.id == 37 ? (scope.row.userStatus == 1 ? '锁定' : '解锁') : opBar.operationContent
                                    }}</el-link>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<style scoped>
.el-aside {
    color: #333;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.el-main {
    color: #333;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0;
}
</style>

<script>
import request from "../axios/request";
export default {
    data() {
        return {
            addNewUserDialog: false,
            status: null,
            departmentArr: [],
            departmentEditArr: [],
            userInfoArr: [],
            OperationArr: [],
            tableColumn: [],
            showDislog: false,
            tableForm: {
                aimDepartment: null
            },
            employeeForm: {
                username: null,
                name: null,
                role: null,
                departmentId: null,
            },
            editPermission: false,
            PermissionArr: [],
            permissionList: [],
            aimDepartmentId: null,
            currentDepartmentId: null
        }
    },
    methods: {
        addNewUser() {
            this.showDislog = true
            this.addNewUserDialog = true
        },
        initDialog() {
            this.permissionList = []
            this.addNewUserDialog = false
            this.employeeForm={
                username: null,
                name: null,
                role: null,
                departmentId: null,
            }
        },
        async delDepartment(index) {
            console.log("触发删除事件");
            let departmentId = this.departmentEditArr[index].id
            console.log(departmentId);
            if (departmentId == null) {
                console.log("弹出尾部元素");
                this.departmentEditArr.pop()
                return;
            }
            let resOfDelDepartment = await request({
                url: "/user/api/department/delDepartment?departmentId=" + departmentId,
                method: "DELETE"
            });
            if (resOfDelDepartment.data.status == 200) {
                this.flushDepartmentInfo()
            }
        },
        async getUserInfoByDepartmentId(departmentId) {
            this.currentDepartmentId = departmentId
            let resOfGettingUserInfoByDepartmentId = await request({
                url: "/user/api/getUserInfoByDepartmentId?departmentId=" + departmentId,
                method: "GET",
            });
            this.userInfoArr = resOfGettingUserInfoByDepartmentId.data.data;
        },
        editDepartmentArray() {
            this.status = "edit";
            this.departmentEditArr = this.departmentArr.concat();
        },
        async submitUpdateDepartment(index) {
            let item = this.departmentEditArr[index]
            let resOfSubmitUpdateDepartment = await request({
                url: "/user/api/department/submitUpdateDepartment",
                method: "POST",
                data: item
            });
            if (resOfSubmitUpdateDepartment.data.status == 200) {
                this.departmentEditArr[index].id = resOfSubmitUpdateDepartment.data.data
            }
        },
        addDepartment() {
            this.departmentEditArr.push({
                id: null,
                departmentName: null,
            });
        },
        async getAllPermission() {
            let resOfGettingPermission = await request({
                url: "/user/api/permission/getAllPermission",
                method: "GET"
            });
            this.PermissionArr = resOfGettingPermission.data.data
            console.log(this.PermissionArr);
        },
        async getPermissionOfDepartment() {
            let resOfGetPermissionByDepartmentId = await request({
                url: "/user/api/departmentPermisson/getAllPermissionByDepartmentId/" + this.aimDepartmentId,
                method: "GET"
            });
            this.permissionList = resOfGetPermissionByDepartmentId.data.data
        },
        editPermissionFunc(departmentId) {
            this.aimDepartmentId = departmentId
            this.getAllPermission()
            this.getPermissionOfDepartment()
            this.showDislog = true
            this.editPermission = true
        },
        comeBacktoShowDepartment() {
            this.status = null;
            this.flushDepartmentInfo();
        },
        async resetAccount(userId) {
            await request({
                url: "/user/api/resetAccount/" + userId,
                method: "PUT"
            });
        },
        async submitUpdate() {
            let resOfSubmitUpdateDepartment = null
            if (this.status == "edit") {
                resOfSubmitUpdateDepartment = await request({
                    url: "/user/api/departmentPermisson/updateDepartmentPermission",
                    method: "PUT",
                    data: {
                        departmentId: this.aimDepartmentId,
                        permissionList: this.permissionList
                    }
                });
            } else if (this.addNewUserDialog == true) {
                resOfSubmitUpdateDepartment = await request({
                    url: "/user/api/save",
                    method: "POST",
                    data: this.employeeForm,
                });
            } else {
                resOfSubmitUpdateDepartment = await request({
                    url: "/user/api/updateDepartmentByUserId",
                    method: "PUT",
                    data: {
                        departmentId: this.tableForm.aimDepartment,
                        id: this.aimUserId
                    }
                });
            }

            if (resOfSubmitUpdateDepartment.data.status == 200) {
                this.flushDepartmentInfo()
            }
        },
        async lockOrUnLockAccount(userId) {
            let resOfLockOrUnLockAccount = await request({
                url: "/user/api/lockOrUnLockAccount/" + userId,
                method: "PUT"
            });
            if (resOfLockOrUnLockAccount.data.status == 200) {
                this.getUserInfoByDepartmentId(this.currentDepartmentId)
            }
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return "";
            } else {
                return "warning-row";
            }
        },
        doOperation(item, id) {
            switch (id) {
                case 36:
                    this.showDislog = true
                    this.aimUserId = item.id
                    break;
                case 37:
                    this.lockOrUnLockAccount(item.id)
                    break;
                case 38:
                    this.resetAccount(item.id)
                    break;
                default:
                    break;
            }
        },
        async getOperationArr(tableId) {
            let resOfGettingOperationArr = await request({
                url: "/sys/api/operation/getTableOperations/" + tableId,
                method: "GET",
            });
            this.OperationArr = resOfGettingOperationArr.data.data;
        },
        async getTableColumnArr(tableId) {
            let resOfGettingTableColumns = await request({
                url: "/sys/api/table/getColumn/" + tableId,
                method: "GET",
            });
            this.tableColumn = resOfGettingTableColumns.data.data;
        },
        async flushDepartmentInfo() {
            this.status = null;
            let resOfGettingDepartmentInfo = await request({
                url: "/user/api/department/getDepartmentInfo",
                method: "GET",
            });
            this.departmentArr = resOfGettingDepartmentInfo.data.data;
            this.getTableColumnArr(21)
            this.getOperationArr(21)
            this.getUserInfoByDepartmentId(1)
            this.showDislog = false
            this.tableForm = {
                aimDepartment: null
            }
        },
    },
    beforeMount() {
        this.flushDepartmentInfo();
    },
}
</script>